<template>
  <div class="category-container">
    <div class="category-wrapper">
      <div 
        v-for="(category, index) in visibleCategories" 
        :key="index" 
        class="category-item"
        @click="handleCategoryClick(category)"
      >
        <div class="icon-wrapper">
          <i :class="['icon', category.icon]"></i>
        </div>
        <span class="category-name">{{ category.name }}</span>
      </div>
      <div 
        v-if="showMore" 
        class="category-item"
        @click="handleMoreClick"
      >
        <div class="icon-wrapper">
          <i class="el-icon-more"></i>
        </div>
        <span class="category-name">更多</span>
      </div>
    </div>
  </div>
</template>

<script>
import Request from '@/utils/request.js'

export default {
  name: 'FrontCategory',
  data() {
    return {
      categories: [],
      maxVisible: 6
    }
  },
  computed: {
    visibleCategories() {
      return this.categories.slice(0, this.maxVisible)
    },
    showMore() {
      return this.categories.length > this.maxVisible
    }
  },
  created() {
    this.fetchCategories()
  },
  methods: {
    async fetchCategories() {
      try {
        const res = await Request.get('/category/all')
        if (res.code === '0') {
          this.categories = res.data.map(item => ({
            ...item,
            icon: item.icon
          }))
        }
      } catch (error) {
        console.error('获取分类数据失败:', error)
      }
    },
    getCategoryIcon(name) {
      const iconMap = {
        '蔬菜': 'el-icon-food',
        '水果': 'el-icon-apple',
        '谷物': 'el-icon-dish',
        '干货': 'el-icon-dessert',
        '肉类': 'el-icon-food',
        '水产': 'el-icon-dish-1',
        '农副产品': 'el-icon-sugar',
        '其他': 'el-icon-more'
      }
      return iconMap[name] || 'el-icon-more'
    },
    handleCategoryClick(category) {
      this.$router.push({
        name: 'category',
        params: { id: category.id },
        query: { name: category.name }
      })
    },
    handleMoreClick() {
      this.$router.push('/products')
    }
  }
}
</script>

<style scoped>
.category-container {
  background: linear-gradient(135deg, #e8f5e9 0%, #fffde7 100%);
  padding: 18px 0;
  margin: 24px 0;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(103,194,58,0.10);
}

.category-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px 12px 8px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(232,245,233,0.5);
  box-shadow: 0 2px 8px #a5d6a722;
  position: relative;
}

.category-item:hover {
  background: linear-gradient(90deg, #e8f5e9 60%, #fffde7 100%);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 4px 16px rgba(103, 194, 58, 0.15);
}

.icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a5d6a7 0%, #e8f5e9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px #a5d6a722;
  position: relative;
}

.icon-wrapper::after {
  content: '';
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="9" cy="9" rx="8" ry="5" fill="%23e8f5e9"/><path d="M4 13 Q9 3 14 13" stroke="%2367c23a" stroke-width="1.5" fill="none"/><ellipse cx="9" cy="9" rx="2" ry="4" fill="%23a5d6a7"/></svg>') no-repeat center/contain;
  opacity: 0.7;
}

.icon {
  font-size: 22px;
  color: #67C23A;
}

.category-name {
  font-size: 15px;
  font-weight: 600;
  color: #388e3c;
  text-align: center;
  letter-spacing: 0.5px;
}

@media (max-width: 700px) {
  .category-wrapper {
    padding: 0 6px;
    gap: 8px;
  }
  .category-item {
    padding: 10px 2px 8px 2px;
    border-radius: 8px;
  }
  .icon-wrapper {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
  }
  .category-name {
    font-size: 12px;
  }
}
</style> 